<template>
  <div class="connect">
    <div class="senderAddress">
      <div class="senderAddress_title">
        {{$t('Order_module.sender_address')}}
      </div>


      <el-form :rules="rules" :inline="true" :model="senderAddressObj" class="demo-form-inline">
        <el-form-item :label="$t('Order_module.name')" prop="name" style="width: 30%;" >
          <!-- 姓名  -->
          <el-input class='submit_imput' v-model="senderAddressObj.name" :placeholder="$t('Order_module.enter_name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.corporate_name')"    style="width: 30%;" >
          <!-- 公司名称 -->
          <el-input class='submit_imput' v-model="senderAddressObj.corporate_name" :placeholder="$t('Order_module.Enter_company_name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.country')" prop="country"  style="width: 30%;" >
          <!-- 国家 -->
          <el-select class='submit_imput' v-model="senderAddressObj.country" :placeholder="$t('Order_module.Select_a_country')">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <!-- <el-input class='submit_imput'  v-model="senderAddressObj.country" :placeholder="$t('Order_module.Select_a_country')"></el-input> -->
        </el-form-item>
        <el-form-item prop="economize"  :label="$t('Order_module.economize')" style="width: 30%;" >
          <!-- 省 -->
           <!-- <el-select class='submit_imput' v-model="senderAddressObj.economize" :placeholder="$t('Order_module.Select_Province')">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
          <el-input class='submit_imput' v-model="senderAddressObj.economize" :placeholder="$t('Order_module.Select_Province')"></el-input>
        </el-form-item>
        <el-form-item prop="city" :label="$t('Order_module.city')" style="width: 30%;" >
          <!-- 市 -->
         <!-- <el-select class='submit_imput' v-model="senderAddressObj.city" :placeholder="$t('Order_module.Select_City')">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
          <el-input class='submit_imput' v-model="senderAddressObj.city" :placeholder="$t('Order_module.Select_City')"></el-input>
        </el-form-item>
        <el-form-item prop="distinguish" :label="$t('Order_module.distinguish')" style="width: 30%;" >
          <!-- 区 -->
         <!-- <el-select class='submit_imput' v-model="senderAddressObj.distinguish" :placeholder="$t('Order_module.Selection_Area')">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
          <el-input class='submit_imput' v-model="senderAddressObj.distinguish" :placeholder="$t('Order_module.Selection_Area')"></el-input>
        </el-form-item>
       <el-form-item prop="Address"  :label="$t('Order_module.Address')" style="width: 30%;" >
         <!-- 详细地址 -->
         <el-input class='submit_imput' v-model="senderAddressObj.Address" :placeholder="$t('Order_module.Enter_detailed_address')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.cell_phone_num')" style="width: 30%;" >
         <!-- 手机号 -->
         <el-input class='submit_imput' v-model="senderAddressObj.cell_phone_num" :placeholder="$t('Order_module.Enter_cell_phone_number')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.Phone_number')" style="width: 30%;" >
         <!-- 电话号 -->
         <el-input class='submit_imput' v-model="senderAddressObj.Phone_number" :placeholder="$t('Order_module.Enter_phone_number')"></el-input>
       </el-form-item>

       <el-form-item :label="$t('Order_module.Postal_Code')" style="width: 30%;" >
         <!-- 邮编 -->
         <el-input class='submit_imput' v-model="senderAddressObj.Postal_Code" :placeholder="$t('Order_module.Enter_postal_code')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.Address_Resolution')" style="width: 100%;" >
        <!-- 地址解析 -->
         <el-input style="width: 80vw;" type="textarea" :rows="5" v-model="senderAddressObj.Address_Resolution" :placeholder="$t('Order_module.Enter_resolution_address')"></el-input>
       </el-form-item>
       <el-button @click="getAddress(senderAddressObj.Address_Resolution , '1')" type="primary">{{$t('Order_module.Resolve_Now')}}</el-button>
      </el-form>
    </div>


    <div class="senderAddress" style="margin-top: 5vh;">
      <div class="senderAddress_title">
        {{$t('Order_module.Recipient_Address')}}
      </div>
      <el-form :rules="rules2"  :inline="true" :model="senderAddressObj" class="demo-form-inline">
        <el-form-item prop="name" :label="$t('Order_module.name')" style="width: 30%;" >
          <!-- 姓名  -->
          <el-input class='submit_imput' v-model="Recipient_AddressObj.name" :placeholder="$t('Order_module.enter_name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.corporate_name')" style="width: 30%;" >
          <!-- 公司名称 -->

          <el-input class='submit_imput' v-model="Recipient_AddressObj.corporate_name" :placeholder="$t('Order_module.Enter_company_name')"></el-input>
        </el-form-item>
        <el-form-item prop="country" :label="$t('Order_module.country')" style="width: 30%;" >
          <!-- 国家 -->
          <el-select class='submit_imput' v-model="Recipient_AddressObj.country" :placeholder="$t('Order_module.Select_a_country')">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <!-- <el-input class='submit_imput' v-model="Recipient_AddressObj.country" :placeholder="$t('Order_module.Select_a_country')"></el-input> -->
        </el-form-item>
        <el-form-item prop="economize" :label="$t('Order_module.economize')" style="width: 30%;" >
          <!-- 省 -->
          <el-input class='submit_imput' v-model="Recipient_AddressObj.economize" :placeholder="$t('Order_module.Select_Province')"></el-input>
        </el-form-item>
        <el-form-item prop="city" :label="$t('Order_module.city')" style="width: 30%;" >
          <!-- 市 -->
          <el-input class='submit_imput' v-model="Recipient_AddressObj.city" :placeholder="$t('Order_module.Select_City')"></el-input>
        </el-form-item>
        <el-form-item prop="distinguish" :label="$t('Order_module.distinguish')" style="width: 30%;" >
          <!-- 区 -->
          <el-input class='submit_imput' v-model="Recipient_AddressObj.distinguish" :placeholder="$t('Order_module.Selection_Area')"></el-input>
        </el-form-item>
       <el-form-item prop="Address" :label="$t('Order_module.Address')" style="width: 30%;" >
         <!-- 详细地址 -->
         <el-input class='submit_imput' v-model="Recipient_AddressObj.Address" :placeholder="$t('Order_module.Enter_detailed_address')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.cell_phone_num')" style="width: 30%;" >
         <!-- 手机号 -->
         <el-input class='submit_imput' v-model="Recipient_AddressObj.cell_phone_num" :placeholder="$t('Order_module.Enter_cell_phone_number')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.Phone_number')" style="width: 30%;" >
         <!-- 电话号 -->
         <el-input class='submit_imput' v-model="Recipient_AddressObj.Phone_number" :placeholder="$t('Order_module.Enter_phone_number')"></el-input>
       </el-form-item>

       <el-form-item :label="$t('Order_module.Postal_Code')" style="width: 30%;" >
         <!-- 邮编 -->
         <el-input class='submit_imput' v-model="Recipient_AddressObj.Postal_Code" :placeholder="$t('Order_module.Enter_postal_code')"></el-input>
       </el-form-item>
       <el-form-item :label="$t('Order_module.Address_Resolution')" style="width: 100%;" >
        <!-- 地址解析 -->
         <el-input style="width: 80vw;" type="textarea" :rows="5" v-model="Recipient_AddressObj.Address_Resolution" :placeholder="$t('Order_module.Enter_resolution_address')"></el-input>
       </el-form-item>
        <el-button @click="getAddress(Recipient_AddressObj.Address_Resolution , '2')" type="primary">{{$t('Order_module.Resolve_Now')}}</el-button>
      </el-form>
    </div>

    <div class="senderAddress" style="margin-top: 5vh;">
      <div class="senderAddress_title">
        {{$t('Order_module.Express_information')}}
      </div>
      <el-form :inline="true" :model="shopInfoObj" class="demo-form-inline">
        <div>
          <el-form-item :label="$t('Order_module.Number_of_packages')" style="width: 30%;" >
            <!-- 包裹件数  -->
            <el-input class='submit_imput' v-model="shopInfoObj.Number_of_packages" :placeholder="$t('Order_module.Number_of_packages')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('Order_module.Order_No')" style="width: 30%;" >
            <!-- 订单号  -->
            <el-input class='submit_imput' v-model="shopInfoObj.Order_No" :placeholder="$t('Order_module.Order_No')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('Order_module.Cargo_weight')" style="width: 30%;" >
            <!-- 货物重量  -->
            <el-input class='submit_imput' v-model="shopInfoObj.Cargo_weight" :placeholder="$t('Order_module.Cargo_weight')">
               <template slot="append">KG</template>
            </el-input>
          </el-form-item>
        </div>
         <el-button @click="addShop()">{{$t('Order_module.increase')}}</el-button>

      </el-form>
       <el-table
          :data="shopList"
          border
          style="width: 100%;margin-top:2vh;">

          <el-table-column min-width="120px" prop="name" :label="$t('Order_module.trade_name')" align="center" >
            <template slot-scope="scope">
                <el-input  v-model="scope.row.name" :placeholder="$t('Order_module.Order_No')"></el-input>
            </template>
          </el-table-column>
          <el-table-column min-width="120px"  prop="number" :label="$t('public.number')" align="center" >
            <template slot-scope="scope">
                <el-input  v-model="scope.row.number" :placeholder="$t('Order_module.Order_No')"></el-input>
            </template>
          </el-table-column>
          <el-table-column min-width="120px"  prop="price" :label="$t('public.unit_price')" align="center" >
            <template slot-scope="scope">
                <el-input  v-model="scope.row.price" :placeholder="$t('Order_module.Order_No')"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('public.operate')"
            align="center"

            >
            <template slot-scope="scope">
              <el-button type="text" @click="del(scope.$index)" style="color: red;" size="small">{{$t('public.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>

 import AddressParse,{AREA, Utils} from 'address-parse';
  export default {
    data() {
      return {
          rules: {
            name: [{ required: true, message: this.$t('Order_module.enter_name'), trigger: 'blur' }],
            country: [{ required: true, message: this.$t('Order_module.Select_a_country'), trigger: 'blur' }],
            economize: [{ required: true, message: this.$t('Order_module.Select_Province'), trigger: 'blur' }],
            city: [{ required: true, message: this.$t('Order_module.Select_City'), trigger: 'blur' }],
            distinguish: [{ required: true, message: this.$t('Order_module.Selection_Area'), trigger: 'blur' }],
            Address: [{ required: true, message: this.$t('Order_module.Enter_detailed_address'), trigger: 'blur' }],
          },
          rules2: {
            name: [{ required: true, message: this.$t('Order_module.enter_name'), trigger: 'blur' }],
            country: [{ required: true, message: this.$t('Order_module.Select_a_country'), trigger: 'blur' }],
            economize: [{ required: true, message: this.$t('Order_module.Select_Province'), trigger: 'blur' }],
            city: [{ required: true, message: this.$t('Order_module.Select_City'), trigger: 'blur' }],
            distinguish: [{ required: true, message: this.$t('Order_module.Selection_Area'), trigger: 'blur' }],
            Address: [{ required: true, message: this.$t('Order_module.Enter_detailed_address'), trigger: 'blur' }],
          },
        senderAddressObj:{ // 发件人地址
          name:'',//姓名
          corporate_name:'',//公司名称
          country:'',//国家
          economize:'',//省
          city:'',//城市
          distinguish:'',//区
          Address:'',//详细地址
          cell_phone_num:'',//手机号
          Phone_number:'',//电话号
          Postal_Code:'',//邮政编码
          Address_Resolution:'',//地址解析
        },
        Recipient_AddressObj:{
          // 收件人地址
          name:'',//姓名
          corporate_name:'',//公司名称
          country:'',//国家
          economize:'',//省
          city:'',//城市
          distinguish:'',//区
          Address:'',//详细地址
          cell_phone_num:'',//手机号
          Phone_number:'',//电话号
          Postal_Code:'',//邮政编码
          Address_Resolution:'',//地址解析
        },
        shopInfoObj:{
          //  快件信息
          Number_of_packages:'',//包裹件数
          Order_No:'',//订单号
          Cargo_weight:'',//货物重量
        },
        shopList:[
          {name:'' , number:'' , price:''},
        ]
      }
    },

    created() {
    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      // 删除商品
      del(index){
        console.log(index)
        this.shopList.splice(index,1)
      },
      // 添加商品
      addShop(){
        this.shopList.push({name:'' , number:'' , price:''})
      },
      // 自动识别地区
      getAddress(text , type){
        console.log(text , type)
        if(text==''){
           this.$message(this.$t('Order_module.Content_cannot_be_empty'));
           return
        }
        var result = AddressParse.parse(text)[0];
        if(type==1){
           this.senderAddressObj.name=result.name;//姓名
           this.senderAddressObj.economize=result.province;//省
           this.senderAddressObj.city=result.city;//城市
           this.senderAddressObj.distinguish=result.area;//区
           this.senderAddressObj.Address=result.details;//详细地址
           this.senderAddressObj.cell_phone_num=result.mobile;//手机号
           console.log(this.senderAddressObj)
        }else{
          this.Recipient_AddressObj.name=result.name;//姓名
          this.Recipient_AddressObj.economize=result.province;//省
          this.Recipient_AddressObj.city=result.city;//城市
          this.Recipient_AddressObj.distinguish=result.area;//区
          this.Recipient_AddressObj.Address=result.details;//详细地址
          this.Recipient_AddressObj.cell_phone_num=result.mobile;//手机号
        }
        console.log(result)
      }


    }
  }
</script>

<style scoped>
  @import url('place_an_order.css');
</style>
